<template>
  <div class="h-full w-full">
    <Top></Top>
    <a-layout class="px-[10px] pt-[10px]">
      <Mnues v-model="selectedMenu" :list="list"></Mnues>
      <a-layout-content class="mt-[10px] bg-[#fff] p-[20px]">
        <Info
          :editId="edit.id"
          @back="cancel"
          ref="InfoRef"
          v-if="selectedMenu == 1 || (selectedMenu == 2 && edit.visible)"
        />
        <List
          v-else-if="selectedMenu == 2 && !edit.visible"
          @setEdit="setEdit"
        />
        <Store v-else />
        <!-- <Used v-else-if="selectedMenu == 5" />
        <Unused v-else-if="selectedMenu == 6" /> -->
      </a-layout-content>
      <a-layout-footer
        v-if="selectedMenu == 1 || edit.visible"
        style="
          background-color: #fff;
          box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.04);
          margin: 0 -10px -10px -10px;
          text-align: center;
        "
      >
        <a-button class="mr-[12px]" @click="cancel">{{
          edit.visible ? "取消" : "重置"
        }}</a-button>
        <a-button type="primary" @click="confirm"> 保存</a-button>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script lang="ts" setup>
import Top from "@/components/workHearder/index.vue";
import GiveOne from "@/assets/img/work/give-info.png";
import GiveTwo from "@/assets/img/work/give-list.png";
import GiveThree from "@/assets/img/work/give-store.png";
import AssetFive from "@/assets/img/组 6320@2x.png";
import Assetsix from "@/assets/img/组 6319@2x.png";

import Mnues from "@/components/menus/index.vue";

import Info from "./info/index.vue";
import List from "./list/index.vue";
import Store from "./store/index.vue";
// import Store from "./store/index.vue";
// preparation
// authentication
import { useRouter } from "vue-router";
import { watch } from "vue";

const InfoRef = ref(null);
const edit = ref({
  visible: false,
  id: "",
});
const selectedMenu = ref(1);

watch(
  () => selectedMenu.value,
  () => {

    if (edit.value.visible && selectedMenu.value == 1) {

      InfoRef.value.cancel();
    }

    if (edit.value.visible) {
      edit.value = {
        visible: false,
        id: "",
      };
    }

  }
);

const confirm = async () => {
  InfoRef.value.confirm();
};

const cancel = () => {
  if (edit.value.visible) {
    edit.value = {
      visible: false,
      id: "",
    };
    return;
  }

  InfoRef.value.cancel();
};

const list = [
  {
    key: 1,
    name: "信息发布",
    img: GiveOne,
  },
  {
    key: 2,
    name: "发布列表",
    img: GiveTwo,
  },
  {
    key: 3,
    name: "我的积分",
    img: GiveThree,
  },
  {
    key: 5,
    name: "标书制作",
    img: AssetFive,
  },
  {
    key: 6,
    name: "企业认证服务",
    img: Assetsix,
  },
];

const setEdit = (id) => {
  edit.value = {
    id,
    visible: true,
  };
};
</script>

<style lang="scss" scoped></style>
